<template>
  <div class="dashboard-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />





    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart-user />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart-device />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart-device-type />
        </div>
      </el-col>
    </el-row>


    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>


    <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <table-a />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="margin-bottom:30px;">
        <table-b />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import PieChartUser from './components/PieChart_User'
import PieChartDevice from './components/PieChart_Device'
import PieChartDeviceType from './components/PieChart_Device_Type'
import LineChart from './components/LineChart'

import TableA from './components/TableA'
import TableB from './components/TableB'

export default {
  methods:{
    handleSetLineChartData(){

    }
  },
  components:{
    PanelGroup,
    PieChartUser,
    PieChartDevice,
    PieChartDeviceType,
    LineChart,
    TableA,
    TableB
  },
  name: 'Dashboard',
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
